{{ define "js"}}
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="/js/highcharts-vue.min.js"></script>
<script src="/js/highcharts-global-options.js"></script>
<script>
  var app = new Vue({
      el: '#app',
      delimiters: ['${', '}'], // Standard vuejs template syntax conflicts with golang template syntax
      components: {
          highcharts: HighchartsVue.Chart
      },
      data: {
          updateIn: -1,
          page: {{.}},
          chartOptions: {
              rangeSelector: {
                  enabled: false
              },
              chart: {
                  type: 'line'
              },
              title: {
                  text: 'Network History'
              },
              subtitle: {},
              xAxis: {
                  type: 'datetime',
                  range: 7 * 24 * 60 * 60 * 1000,
                  labels: {
                    formatter: function(){
                        var epoch = timeToEpoch(this.value)
                        var orig = this.axis.defaultLabelFormatter.call(this)
                        return `${orig}<br/>Epoch ${epoch}`
                    }
                  }
              },
              yAxis: [{
                  title: {
                      text: 'Balance [ETH]'
                  },
                  labels: {
                      formatter: function () {
                          return this.value.toFixed(0);
                      }
                  },
                  opposite: false
              }, {
                  title: {
                      text: 'Active Validators'
                  },
                  labels: {
                      formatter: function () {
                          return this.value.toFixed(0);
                      }
                  },
                  opposite: true
              }],
              series: [{
                  name: "Staked Ether",
                  yAxis: 0,
                  data: {{.StakedEtherChartData}}
              }, {
                  name: "Active Validators",
                  yAxis: 1,
                  data: {{.ActiveValidatorsChartData}}
              }],
              legend: {
                  enabled: true
              },
              tooltip: {
                  formatter: function(tooltip) {
                      var orig = tooltip.defaultFormatter.call(this, tooltip)
                      var epoch = timeToEpoch(this.x)
                      orig[0] = `${orig[0]}<span style="font-size:10px">Epoch ${epoch}</span>`
                      return orig
                  }
              }
          }
      },
      filters: {
          fromNow(date) {
              return moment(date).fromNow();
          }
      },
      created: function () {
          this.tick();
          setInterval(function () {
              this.tick();
          }.bind(this), 1000);
        },
      methods: {
          tick: function () {
              if (this.updateIn <= 0) {
                  $.getJSON('/index/data', function (response) {
                      this.page = response;
                  }.bind(this));
                  this.updateIn = 15;
              } else {
                  this.updateIn--;
              }
          }
        }
  })
</script>
{{end}} {{ define "css"}}

<style>
  .hero-container {
    position: relative;
    min-height: 250px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .hero-image {
    overflow: hidden;
    flex: 1;
    max-width: 500px;
    min-width: 320px;
    max-height: 400px;
    min-height: 200px;
  }

  .hero-image svg {
    overflow: hidden;
    width: inherit;
    height: inherit;
  }

  @media (max-width: 960px) {
    .hero-image {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .hero-container {
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero-text {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .hero-image svg {
      opacity: 0.4;
    }
  }

  .hero-text {
    flex: 1;
    min-width: 305px;
    max-width: 500px;
    z-index: 5;
    border-radius: 5px;
  }

  [v-cloak] {
    visibility: hidden;
  }

  .responsive-border-right {
    border-right-color: rgb(222, 226, 230);
    border-right-style: solid;
    border-right-width: 1px;
  }

  @media (max-width: 767px) {
    .responsive-border-right-l {
      border: hidden;
    }
  }
</style>
{{end}} {{ define "content"}}
<div id="app" v-cloak>
  <div class="hero-container">
    <div class="hero-image">
      <svg id="b1dfe96f-fe37-4185-8264-ce8c2a4cb4b9" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1073 741.95">
        <defs>
          <linearGradient id="81c36db9-452d-475d-884d-b278af2ef6e6" x1="717.06" y1="814.6" x2="717.06" y2="285.55" gradientTransform="translate(-12.74 19.35) rotate(-1.34)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="gray" stop-opacity="0.25" />
            <stop offset="0.54" stop-color="gray" stop-opacity="0.12" />
            <stop offset="1" stop-color="gray" stop-opacity="0.1" />
          </linearGradient>
        </defs>
        <title>ethereum desire</title>
        <path d="M129.5,240.48S315.09,395.75,378.29,489.31,601,566.95,601,566.95" transform="translate(-63.5 -79.02)" fill="none" stroke="var(--light)" stroke-miterlimit="10" stroke-width="3" opacity="0.5" />
        <path
          d="M865,796.59c-1.21-5.16-4.51-7-11.78-6.12-7.9,1-15.79,1.93-25.45-4.87-5.12-3.6-9.1-6.78-11.73-9l.43-.11S796.9,752,798.15,737.9s-9.1-50.52-9.1-50.52-.56-23.79-6-37.6a60.66,60.66,0,0,1-3.3-11.21c-3.22-17.42-12.92-63.47-28.64-83.77l-1-40.59,0-1.56.41.41a18.49,18.49,0,0,0,3.5-5.36c4.61,2.37,14.55,7.28,19.93,8.33,7.16,1.39,16,7.43,16,7.43s20.35,23.72,35.94,13.21-29.15-27.42-29.15-27.42-15.24-8.23-21.62-10.42c-4.52-1.55-13.91-7.68-19-11.13q-.13-.83-.3-1.69c-2.94-15.22-7.24-21-5.46-30.39a34.56,34.56,0,0,1,2.21-7c6-14.19-19-33.9-19-33.9s-17-14.43-10.82-22.38c0,0,9.48-1,1.38-8.62-1.39-1.31-2.83-2.52-4.26-3.64.06-.21.12-.41.19-.62a44,44,0,0,1,7.78-14.3c.54-.67,1.12-1.33,1.73-2a30.53,30.53,0,0,0,22.67-30.06,30.06,30.06,0,0,0-8.18-19.92,8,8,0,0,0,2.6-6.82c.82-9.9-19.05-19.9-27.35-18.44-4.73.83-9,3.38-13.74,4.25-4.91.9-10-.08-15,0a36.48,36.48,0,0,0-18.89,5.52A9.62,9.62,0,0,0,668.2,301a12.52,12.52,0,0,0-1,5.14c-1.4,18.21-14.58,33.36-28.58,45.33a18.9,18.9,0,0,0-4.74,5.15c-1.42,2.68-1.39,5.85-1.41,8.87-.22,30.18-10.92,61.88-35.2,80.28.38.24.76.47,1.16.68-.37.29-.74.6-1.12.88,7.89,5.13,19.75,2.63,25-5a73.9,73.9,0,0,1-10,23.49l1-.05c-.33.54-.65,1.08-1,1.61,10.82-.23,18.79-9.66,25.2-18.26.07.83.12,1.67.15,2.5A50.39,50.39,0,0,1,630.33,478l1-.09q-.47.84-1,1.66,2.39-.2,4.78-.49c-6.38,13-16.39,36.7-16.39,36.7L615,525a42.37,42.37,0,0,1-8.63,13.31c-4.05,4.23-9.16,9.37-11.35,10.74-3.9,2.43-13.46,33.88,3.84,28.79s23.86-29.44,23.86-29.44a23.59,23.59,0,0,1,4.49-11,29.5,29.5,0,0,0,3.28-5.89,314.81,314.81,0,0,1,16.11-30.85,107.61,107.61,0,0,0,8.63-17.78,52.4,52.4,0,0,1,5.09-10,56.25,56.25,0,0,0,11-6.13,29.33,29.33,0,0,0,7.43-7.5,141.18,141.18,0,0,0,4.47,14.53c4.2,11.36,11.87,37.66.76,55.25-10.19,16.14-10.41,23.95-9.65,27.17,0,.17-.1.34-.15.52a29.21,29.21,0,0,0,2.55,21.42,27.47,27.47,0,0,1,3.13,11.91l0,1.19a26.63,26.63,0,0,1-1.08,8.14c-2.17,7.36-6.69,23.58-8.2,35.33-2,15.66-15.11,30.79-15.11,30.79s-34.75,37.5-48,81.52c0,0-7.47,18.91-12.92,22.94,0,0-10.37,6.17-12.1,18,0,.32-.09.64-.12,1l-2.25,5.52S599.4,805,603.36,804.9l2.26-4.74,20.15,15.14,30.07-.7a9.49,9.49,0,0,0,2.17-2c1.44-1.88,2.29-4.82-2.27-7.88a10.93,10.93,0,0,0-7.66-1.61c-3.87.57-11.27-.72-18.2-15.19l-3.82-7.12.49.17s-6.59-10.77,6.54-25.13,32-52.26,32-52.26,25.64-20.89,30.08-34.27c0,0,17.1-28.87,27-46,1.65,3.58,3,6.29,3,6.29s20.44,27.62,23.31,48.63S770.74,751,779,764.88s8.37,19.32,8.37,19.32-5.12,13.12-1.91,23.9l.1.34.15,6.24,23,.24-.07-3.12,29.32.87s28.31-8.47,27.37-14.69Q865.16,797.25,865,796.59Z"
          transform="translate(-63.5 -79.02)"
          fill="url(#81c36db9-452d-475d-884d-b278af2ef6e6)"
        />
        <path d="M737.08,363.61a46,46,0,0,0-9.56,8.9,43.36,43.36,0,0,0-7.52,14,38.63,38.63,0,0,0-2,12.74l-14.85-12.67-19,4.28A60,60,0,0,0,694.32,378a64.36,64.36,0,0,0,6-13.47,49.88,49.88,0,0,0,2.09-9.34S757.43,349.35,737.08,363.61Z" transform="translate(-63.5 -79.02)" fill="#efb4b6" />
        <path
          d="M660.12,811.48a9.22,9.22,0,0,1-2.1,2l-29.09.68L609.44,799.3l-2.19,4.65c-3.83.09-22.45-10.2-22.45-10.2l2.17-5.41c0-.32.07-.64.12-1,1.67-11.66,11.7-17.7,11.7-17.7l3.79-1.62,23.11,5.59,7.21,13.62c6.71,14.2,13.86,15.47,17.61,14.91a10.45,10.45,0,0,1,7.41,1.58C662.34,806.75,661.51,809.64,660.12,811.48Z"
          transform="translate(-63.5 -79.02)"
          fill="#c17174"
        />
        <path
          d="M860.59,797.24c.91,6.11-26.47,14.41-26.47,14.41l-28.36-.87.07,3.06-22.21-.25-.14-6.12-.1-.33c-3.1-10.58,1.84-23.45,1.84-23.45l2.21-3.88,22.05-6.64a148.35,148.35,0,0,0,14.83,11.91c9.35,6.67,17,5.73,24.62,4.78,7-.87,10.23.95,11.4,6Q860.48,796.52,860.59,797.24Z"
          transform="translate(-63.5 -79.02)"
          fill="#c17174"
        />
        <path
          d="M728.41,614.24c-.73,1.56-3.13,5.89-6.32,11.52C712.57,642.58,696,670.9,696,670.9,691.75,684,667,704.52,667,704.52s-18.27,37.19-31,51.27-6.31,24.65-6.31,24.65l-30.89-10.76c5.27-4,12.49-22.5,12.49-22.5,12.77-43.19,46.37-80,46.37-80s12.67-14.85,14.61-30.21c1.45-11.53,5.82-27.44,7.92-34.66a26.48,26.48,0,0,0,1-8l0-1.17a27.27,27.27,0,0,0-3-11.68,29,29,0,0,1-2.48-21,24.18,24.18,0,0,1,3-7.1l7.55-2.2L713,543.38s1.65,5.81,3.88,14.12C722.05,576.89,730.45,609.9,728.41,614.24Z"
          transform="translate(-63.5 -79.02)"
          fill="var(--light)"
        />
        <path
          d="M728.41,614.24c-.73,1.56-3.13,5.89-6.32,11.52C712.57,642.58,696,670.9,696,670.9,691.75,684,667,704.52,667,704.52s-18.27,37.19-31,51.27-6.31,24.65-6.31,24.65l-30.89-10.76c5.27-4,12.49-22.5,12.49-22.5,12.77-43.19,46.37-80,46.37-80s12.67-14.85,14.61-30.21c1.45-11.53,5.82-27.44,7.92-34.66a26.48,26.48,0,0,0,1-8l0-1.17a27.27,27.27,0,0,0-3-11.68,29,29,0,0,1-2.48-21,24.18,24.18,0,0,1,3-7.1l7.55-2.2L713,543.38s1.65,5.81,3.88,14.12C722.05,576.89,730.45,609.9,728.41,614.24Z"
          transform="translate(-63.5 -79.02)"
          opacity="0.1"
        />
        <path
          d="M813.38,776.14l-28.16,7.55s-.13-5.36-8.1-19-26.78-64.47-29.56-85.08S725,631.93,725,631.93s-1.3-2.66-2.9-6.17c-1.48-3.25-3.2-7.22-4.38-10.5-2.46-6.83-13.41-16.53-13.41-16.53-20-11.12-24-24.43-24.23-32.76a23.54,23.54,0,0,1,1.07-8.05l5.14-6.74L696,538.42l32.87-35.23,20,4.13,1.2,51.28c15.21,19.92,24.61,65.1,27.73,82.2a60.2,60.2,0,0,0,3.2,11c5.27,13.55,5.82,36.89,5.82,36.89s10,35.76,8.82,49.57S813.38,776.14,813.38,776.14Z"
          transform="translate(-63.5 -79.02)"
          fill="var(--light)"
        />
        <path d="M751.54,490.4s15.58,11.12,21.75,13.28,20.92,10.23,20.92,10.23,43.28,16.6,28.2,26.91-34.77-13-34.77-13-8.56-5.93-15.49-7.3-21.66-9.45-21.66-9.45Z" transform="translate(-63.5 -79.02)" fill="#efb4b6" />
        <path d="M737.08,363.61a46,46,0,0,0-9.56,8.9,30,30,0,0,1-5.53.64c-8.42.2-12.78-9-18.34-14.5,1.75-5.56-1.23-3.42-1.23-3.42S757.43,349.35,737.08,363.61Z" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <circle cx="721.26" cy="341.77" r="29.86" transform="translate(-71.31 -62.04) rotate(-1.34)" fill="#efb4b6" />
        <path d="M718,399.29l-14.85-12.67-19,4.28A60,60,0,0,0,694.32,378l.13,0a25.56,25.56,0,0,1,18.49,3.53,75.69,75.69,0,0,1,7.06,5A38.63,38.63,0,0,0,718,399.29Z" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path
          d="M748.87,507.31l.27,11.45c-2.31-2.31-13.79-13.22-10.66,2.58,3.47,17.53-16.9,30.26-16.9,30.26a73,73,0,0,1-4.74,5.89C700.68,575.4,686.36,570,680.07,566a21.75,21.75,0,0,1-3.4-2.59,5.43,5.43,0,0,1-1-2.9,24.18,24.18,0,0,1,3-7.1l7.55-2.2L696,538.42l32.87-35.23Z"
          transform="translate(-63.5 -79.02)"
          opacity="0.1"
        />
        <path
          d="M749.5,517.63s-14.53-15.36-11.05,2.17-16.9,30.26-16.9,30.26c-23.74,32.72-44.91,11.77-44.91,11.77s-5.5-6,8.52-28.54c10.74-17.26,3.32-43.06-.75-54.21A140.5,140.5,0,0,1,680,464.38l-1-4L676.68,451a100.58,100.58,0,0,1-2.5-33.43,95.92,95.92,0,0,1,4.66-22c1.54-4.56,3.27-8.48,5.13-10.82a17.37,17.37,0,0,1,10.49-6A25.52,25.52,0,0,1,713,382.32a69.39,69.39,0,0,1,11,8.4c7.83,7.47-1.33,8.46-1.33,8.46-5.94,7.8,10.47,22,10.47,22s24.19,19.34,18.39,33.27-.33,18.39,3.16,36.69S749.5,517.63,749.5,517.63Z"
          transform="translate(-63.5 -79.02)"
          fill="var(--secondary)"
        />
        <path
          d="M719.28,298.26c-4.58.82-8.72,3.31-13.29,4.16-4.75.88-9.63-.08-14.47,0a34.9,34.9,0,0,0-18.27,5.41,9.35,9.35,0,0,0-3.4,3.22,12.43,12.43,0,0,0-1,5c-1.35,17.87-14.09,32.73-27.63,44.46a18.43,18.43,0,0,0-4.59,5c-1.38,2.63-1.34,5.74-1.36,8.71-.2,29.61-10.54,60.71-34,78.76,7.92,5.23,20,2.39,24.76-5.82a73,73,0,0,1-10.14,25.46c10.46-.22,18.17-9.48,24.37-17.91a49.89,49.89,0,0,1-7,29.92c14-1.21,28.3-4.23,39.62-12.51,5.18-3.79,9.89-9.31,9.78-15.73-.06-3.68-1.7-7.11-2.87-10.6-3.05-9.08-2.32-20.53,5.23-26.42a28.52,28.52,0,0,0,4-3.16c1.73-1.94,2.34-4.61,2.69-7.19a51.33,51.33,0,0,0-.94-18.82,13.85,13.85,0,0,1-.61-4c.17-2.83,2.3-5.2,4.72-6.66s5.18-2.26,7.75-3.47a26.58,26.58,0,0,0,14.89-23.5c0-2.87-.38-6.07,1.44-8.28,2.69-3.28,8.28-2.16,11.5-4.91,3.05-2.61,2.71-7.47,4.84-10.88,1.75-2.8,5-4.29,7.37-6.54C754.57,311,728.89,296.55,719.28,298.26Z"
          transform="translate(-63.5 -79.02)"
          opacity="0.1"
        />
        <path d="M716.76,411.38v.19L697.9,437.18l-11.56,15.69s-3.15,3-7.36,7.51L676.68,451a100.58,100.58,0,0,1-2.5-33.43c4.37-8.72,9.07-14.56,13.47-18.49A17.51,17.51,0,0,1,716.76,411.38Z" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path
          d="M719.24,296.73c-4.58.82-8.72,3.31-13.29,4.16-4.75.88-9.63-.08-14.47,0a34.9,34.9,0,0,0-18.27,5.41,9.35,9.35,0,0,0-3.4,3.22,12.43,12.43,0,0,0-1,5c-1.35,17.87-14.09,32.73-27.63,44.46a18.43,18.43,0,0,0-4.59,5c-1.38,2.63-1.34,5.74-1.36,8.71-.2,29.61-10.54,60.71-34,78.76,7.92,5.23,20,2.39,24.76-5.82a73,73,0,0,1-10.14,25.46c10.46-.22,18.17-9.48,24.37-17.91a49.89,49.89,0,0,1-7,29.92c14-1.21,28.3-4.23,39.62-12.51,5.18-3.79,9.89-9.31,9.78-15.73-.06-3.68-1.7-7.11-2.87-10.6-3.05-9.08-2.32-20.53,5.23-26.42a28.52,28.52,0,0,0,4-3.16c1.73-1.94,2.34-4.61,2.69-7.19a51.33,51.33,0,0,0-.94-18.82,13.85,13.85,0,0,1-.61-4c.17-2.83,2.3-5.2,4.72-6.66s5.18-2.26,7.75-3.47a26.58,26.58,0,0,0,14.89-23.5c0-2.87-.38-6.07,1.44-8.28,2.69-3.28,8.28-2.16,11.5-4.91,3.05-2.61,2.71-7.47,4.84-10.88,1.75-2.8,5-4.29,7.37-6.54C754.53,309.43,728.85,295,719.24,296.73Z"
          transform="translate(-63.5 -79.02)"
          fill="#c17174"
        />
        <path
          d="M715.19,409.88v.19l-18.87,25.61-11.56,15.69S663,471.8,657.29,488a106.16,106.16,0,0,1-8.34,17.44,310.22,310.22,0,0,0-15.57,30.26,29,29,0,0,1-3.17,5.77,23.34,23.34,0,0,0-4.34,10.82s-6.33,23.89-23.06,28.88-7.5-25.86-3.73-28.25c2.12-1.34,7.06-6.38,11-10.53a41.6,41.6,0,0,0,8.34-13.06l3.65-9.11s17.4-41.76,20.41-44.13a10.2,10.2,0,0,0,2.2-2.66c2.41-3.93,4.86-7.83,7.38-11.69,3.31-5.05,8.55-15.15,16.06-35.27.53-1.41,1.06-2.77,1.61-4.07,5.13-12.32,11-20,16.37-24.82A17.51,17.51,0,0,1,715.19,409.88Z"
          transform="translate(-63.5 -79.02)"
          fill="#efb4b6"
        />
        <path d="M715.19,409.88v.19l-18.87,25.61-26.62-13.26c5.13-12.32,11-20,16.37-24.82A17.51,17.51,0,0,1,715.19,409.88Z" transform="translate(-63.5 -79.02)" fill="var(--secondary)" />
        <path d="M691.83,389.54s20.41,8.74,30.38,9.27" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path d="M860.59,797.24c.91,6.11-26.47,14.41-26.47,14.41l-28.36-.87.07,3.06-22.21-.25-.14-6.12-.1-.33,51,1.06,25.9-12.32Q860.48,796.52,860.59,797.24Z" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path d="M660.12,811.48a9.22,9.22,0,0,1-2.1,2l-29.09.68L609.44,799.3l-2.19,4.65c-3.83.09-22.45-10.2-22.45-10.2l2.17-5.41c0-.32.07-.64.12-1l22.69,10,19.48,14.09Z" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path d="M680,557.56s10.94-23.23,22.26-30.39" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path d="M723.5,453.91s6.41,11.95,25.83,7.36" transform="translate(-63.5 -79.02)" opacity="0.1" />
        <path d="M903.48,711.08s-67.63,40.8,57,103.62c0,0,27.46-51-2.9-92.57a40.94,40.94,0,0,0-53.12-11.64Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M904.26,710.22s57.88,44.28,56.25,104.48" transform="translate(-63.5 -79.02)" fill="none" stroke="#535461" stroke-miterlimit="10" />
        <path d="M963.79,815.44s-21.19-72,4-124.91a113.65,113.65,0,0,0,9.19-71.3,191.13,191.13,0,0,0-10.09-33.46" transform="translate(-63.5 -79.02)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2" />
        <path d="M982.52,552.3c0,8.82-16,34.39-16,34.39s-16-25.57-16-34.39a16,16,0,0,1,31.93,0Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M1008.91,601.15c-4.79,7.4-32.09,20.19-32.09,20.19s.5-30.14,5.29-37.54a16,16,0,1,1,26.8,17.36Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M1007.76,684.61c-7.87,4-37.89,1.23-37.89,1.23s15.64-25.77,23.52-29.74a16,16,0,1,1,14.38,28.51Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M992.67,747.57c-7.09,5.24-37.14,7.61-37.14,7.61s11.06-28,18.15-33.29a16,16,0,0,1,19,25.67Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M943.3,623c6.32,6.14,35.79,12.51,35.79,12.51s-7.22-29.27-13.54-35.41A16,16,0,0,0,943.3,623Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M926.58,696.9c7.87,4,37.89,1.23,37.89,1.23S948.83,672.35,941,668.38a16,16,0,1,0-14.38,28.51Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M920.18,770.91c7.09,5.24,37.14,7.61,37.14,7.61s-11.06-28-18.15-33.29a16,16,0,1,0-19,25.67Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M982.52,552.3c0,8.82-16,34.39-16,34.39s-16-25.57-16-34.39a16,16,0,0,1,31.93,0Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M1008.91,601.15c-4.79,7.4-32.09,20.19-32.09,20.19s.5-30.14,5.29-37.54a16,16,0,1,1,26.8,17.36Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M1007.76,684.61c-7.87,4-37.89,1.23-37.89,1.23s15.64-25.77,23.52-29.74a16,16,0,1,1,14.38,28.51Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M992.67,747.57c-7.09,5.24-37.14,7.61-37.14,7.61s11.06-28,18.15-33.29a16,16,0,0,1,19,25.67Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M943.3,623c6.32,6.14,35.79,12.51,35.79,12.51s-7.22-29.27-13.54-35.41A16,16,0,0,0,943.3,623Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M926.58,696.9c7.87,4,37.89,1.23,37.89,1.23S948.83,672.35,941,668.38a16,16,0,1,0-14.38,28.51Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M920.18,770.91c7.09,5.24,37.14,7.61,37.14,7.61s-11.06-28-18.15-33.29a16,16,0,1,0-19,25.67Z" transform="translate(-63.5 -79.02)" opacity="0.25" />
        <path d="M1012.83,816.81s-21.19-72,4-124.91a113.65,113.65,0,0,0,9.19-71.3,191.13,191.13,0,0,0-10.09-33.46" transform="translate(-63.5 -79.02)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2" />
        <path d="M1031.56,553.67c0,8.82-16,34.39-16,34.39s-16-25.57-16-34.39a16,16,0,0,1,31.93,0Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M1058,602.52c-4.79,7.4-32.09,20.19-32.09,20.19s.5-30.14,5.29-37.54a16,16,0,1,1,26.8,17.36Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M1056.8,686c-7.87,4-37.89,1.23-37.89,1.23s15.64-25.77,23.52-29.74A16,16,0,1,1,1056.8,686Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M1041.7,748.94c-7.09,5.24-37.14,7.61-37.14,7.61s11.06-28,18.15-33.29a16,16,0,0,1,19,25.67Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M992.33,624.41c6.32,6.14,35.79,12.51,35.79,12.51s-7.22-29.27-13.54-35.41a16,16,0,0,0-22.25,22.9Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M975.62,698.27c7.87,4,37.89,1.23,37.89,1.23S997.87,673.72,990,669.75a16,16,0,0,0-14.38,28.51Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <path d="M969.22,772.28c7.09,5.24,37.14,7.61,37.14,7.61s-11.06-28-18.15-33.29a16,16,0,1,0-19,25.67Z" transform="translate(-63.5 -79.02)" fill="var(--green)" />
        <rect x="455" y="733.95" width="137" height="5" fill="var(--green)" />
        <rect x="639" y="733.95" width="205" height="5" fill="var(--green)" />
        <rect x="893" y="733.95" width="62" height="5" fill="var(--green)" />
        <path d="M129,79l-1.43,4.86V225l1.43,1.43,65.48-38.71Z" transform="translate(-63.5 -79.02)" fill="#343434" />
        <path d="M129,79,63.5,187.67,129,226.38V79Z" transform="translate(-63.5 -79.02)" fill="#8c8c8c" />
        <path d="M129,238.78l-.81,1V290l.81,2.35,65.52-92.27Z" transform="translate(-63.5 -79.02)" fill="#3c3c3b" />
        <path d="M129,292.36V238.78L63.5,200.09Z" transform="translate(-63.5 -79.02)" fill="#8c8c8c" />
        <path d="M129,226.38l65.48-38.7L129,157.91Z" transform="translate(-63.5 -79.02)" fill="#141414" />
        <path d="M63.5,187.67,129,226.38V157.91Z" transform="translate(-63.5 -79.02)" fill="#393939" />
        <path
          d="M1036.8,410.83C1034.36,292.26,948.09,197,842,197c-51.89,0-99,22.8-133.95,60-72.65,7.6-133.73,60-161.11,132.44C463.77,414.35,402.5,499.61,402.5,601c0,121,87.23,219,194.84,219a177,177,0,0,0,89.84-24.63A175.87,175.87,0,0,0,854.8,798,176.76,176.76,0,0,0,941.66,821c107.61,0,194.84-98,194.84-219C1136.5,519.86,1096.29,448.32,1036.8,410.83Z"
          transform="translate(-63.5 -79.02)"
          fill="var(--bg-color-nav)"
          opacity="0.2"
        />
      </svg>
    </div>
    <div class="hero-text">
      <h1 class="mt-4 text-center">Open Source Ethereum 2.0 Beacon Chain Explorer</h1>
      <h5 class="text-center">{{.Subtitle}}</h5>
      <h6 class="text-center"
        ><a href="https://gitter.im/gobitfly/beaconchain-explorer"><i class="fab fa-gitter"></i> Gitter</a> | <a href="https://github.com/gobitfly/eth2-beaconchain-explorer"><i class="fab fa-github"></i> Github</a> |
        <a href="https://gitcoin.co/grants/258/beaconchain-open-source-eth2-blockchain-explorer"><img class="mr-1 mb-1" height="16" src="/img/gitcoin_logo.svg" />Gitcoin Grant</a>
      </h6>
        <!-- <div style="width: 90%; margin: 1rem auto;">
          <style>
            .fa-search {
              right: 25px;
            }
          </style>
          <div class="input-group typeahead-holder">
            <input id="search-input" class="form-control mr-2 form-control-md typeahead" type="text" name="search" placeholder="Search by Public Key / Block Number / Block Hash" />
            <span class="fas fa-search"></span>
          </div>
      </div> -->
    </div>
  </div>
 
  <div class="card mt-3">
    <div class="card-header">
      <div class="row">
        <div class="col-md-4 responsive-border-right responsive-border-right-l">
          <div class="d-flex justify-content-between">
            <div class="p-2">
              <div class="text-secondary mb-0">Epoch</div>
              <h5 class="font-weight-normal mb-0"> <span data-toggle="tooltip" data-placement="top" title="The most recent epoch">${ page.current_epoch }</span> / <span data-toggle="tooltip" data-placement="top" title="The most recent finalized epoch">${ page.current_finalized_epoch }</span> </h5>
            </div>
            <div class="text-right p-2">
              <div class="text-secondary mb-0">Current Slot </div>
              <h5 class="font-weight-normal mb-0">
                <span data-toggle="tooltip" data-placement="top" title="The most recent slot">${ page.current_slot }</span>
              </h5>
            </div>
          </div>
        </div>
        <div class="col-md-4 responsive-border-right responsive-border-right-l">
          <div class="d-flex justify-content-between">
            <div class="p-2">
              <div class="text-secondary mb-0">Active Validators </div>
              <h5 class="font-weight-normal mb-0">
                <span data-toggle="tooltip" data-placement="top" title="The number of currently active validators">${ page.active_validators }</span>
              </h5>
            </div>
            <div class="text-right p-2">
              <div class="text-secondary mb-0">Pending Validators </div>
              <h5 class="font-weight-normal mb-0">
                <span data-toggle="tooltip" data-placement="top" title="The number of validators currently waiting to enter the active validator set">${ page.entering_validators }</span>
                / <span data-toggle="tooltip" data-placement="top" title="The number of validators currently waiting to exit the active validator set">${ page.exiting_validators }</span>
              </h5>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="d-flex justify-content-between">
            <div class="p-2">
              <div class="text-secondary mb-0">Staked Ether </div>
              <h5 class="font-weight-normal mb-0">
                <span data-toggle="tooltip" data-placement="top" title="Amount of Ether currently staked">${ page.staked_ether }</span>
              </h5>
            </div>
            <div class="text-right p-2">
              <div class="text-secondary mb-0">Average Balance </div>
              <h5 class="font-weight-normal mb-0">
                <span data-toggle="tooltip" data-placement="top" title="Average staked balance of all validators">${ page.average_balance }</span>
              </h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-12">
          <highcharts height="600px" :constructor-type="'stockChart'" :options="chartOptions"></highcharts>
        </div>
      </div>
    </div>
  </div>
  <div class="card mt-3">
    <div class="card-header">
      <h3 class="card-title" style="margin: .5rem 0;">
        <i class="fa fa-cubes"></i> Most recent blocks
        <a class="btn btn-primary btn-sm float-right" href="/blocks">View more</a>
      </h3>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Epoch</th>
              <th>Slot</th>
              <th>Status</th>
              <th>Time</th>
              <th>Proposer</th>
              <th>Root Hash</th>
              <th>Attestations</th>
              <th>Deposits</th>
              <th>Slashings <span data-toggle="tooltip" data-placement="top" title="Proposers">P</span> / <span data-toggle="tooltip" data-placement="top" title="Attesters">A</span></th>
              <th>Exits</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="block in page.blocks">
              <td><a v-bind:href="'/epoch/' + block.epoch">${ block.epoch }</a></td>
              <td><a v-bind:href="'/block/' + block.slot">${ block.slot }</a></td>
              <td v-html="block.status_formatted"></td>
              <td>${ block.ts | fromNow }</td>
              <td v-html="block.proposer_formatted"></td>
              <td class="text-monospace">
                <a v-if="block.status === 1 || block.status === 3" v-bind:href="'/block/' + block.block_root_formatted">0x${ block.block_root_formatted.substr(0, 6) }...</a>
                <a v-if="block.status === 0 || block.status === 2">N/A</a>
              </td>
              <td>${ block.attestations }</td>
              <td>${ block.deposits }</td>
              <td>${ block.proposerslashings } / ${ block.attesterslashings }</td>
              <td>${ block.exits }</td>
            </tr>
          </tbody>
        </table>
        <small style="position: absolute; right: 0;" class="float-right mx-2 my-1"> Next update in ${updateIn}s</small>
      </div>
    </div>
  </div>
  {{if gt .FinalityDelay 3}}
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      var fabContainer = document.querySelector('.fab-message')
      var header = document.createElement('h3')
      header.append('Finality Delay')
      header.classList.add('text-danger')
      var body = document.createElement('p')
      body.append('The testnet is currently experiencing issues achieving finality. The last finalized epoch was {{.FinalityDelay}} epoch{{if ne .FinalityDelay 1}}s{{end}} ago.')
      var messages = document.querySelector('.fab-message-content')
      messages.appendChild(header)
      messages.appendChild(body)
      fabContainer.style.display = 'initial'
    })
  </script>
  {{end}}
</div>
{{end}}
